<template>
	<view class="recovery-wrap">
		<view class="mask">
		</view>
		<view class="content">
			<view class="sub-box">
				<u-subsection :list="list" :current="curNow" @change="sectionChange" height="100" buttonColor="#FF6B3D"
					activeColor="#FFFFFF" fontSize="40"></u-subsection>
			</view>
			<view class="btn-warp" v-if="btnShow">
				<view @click="jump_assess" v-if="connect==true && showTip==false" class="btn-box">
					<bigBtn :btnBoxWidth="btnBoxWidthX" :btnBoxHeight="btnBoxHeightX" :btnColor="btnColorX"
						:btnImgSrc="btnImgSrcX" :btnText="btnTextX" :btnTextColor="btnTextColorX"
						:btnTextSize="btnTextSizeX" :btnImgWidth="btnImgWidthX" 
						:btnRadius="btnRadiusX" btnEColor="#3FB8DA" btnFColor="#53D7AD"
						warpBorderColor="#5FD6B8">
					</bigBtn>
				</view>
				<view @click="open" v-if="connect==false && showTip==false" class="btn-box">
					<bigBtn :btnBoxWidth="btnBoxWidthB" :btnBoxHeight="btnBoxHeightB" :btnColor="btnColorB"
						:btnImgSrc="btnImgSrcB" :btnText="btnTextB" :btnTextColor="btnTextColorB"
						:btnTextSize="btnTextSizeB" :btnImgWidth="btnImgWidthB" 
						:btnRadius="btnRadiusB" btnEColor="#969696" btnFColor="#B4B4B4"
						warpBorderColor="#B3B3B3">
					</bigBtn>
				</view>
				<view class="tips-box" v-if="showTip==true">
					<view>开始评估，请您等待</view>
					<view>
						<loadP></loadP>
					</view>
				</view>
			</view>
			<view class="rank-warp" v-else>
				<view class="rank-title-box">
					<view class="title">
						<view>
							<image src="../../../static/icon/recovery_assess/rank.png" style="width: 70rpx;height: 70rpx;">
							</image>
						</view>
						<view>评估排名</view>
					</view>
					<view class="seg"></view>
					<view class="scoreNumber">{{rank}}</view>
				</view>
				<view class="scroll-box">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<view id="demo1" class="scroll-view-item uni-bg-red" v-for="(item,index) in dataList" :key="index">
							<view class="front-rank">
								<view style="display: flex;align-items: center;justify-content: center;">
									<image src="../../../static/icon/recovery_assess/first.png"
										style="width: 100rpx;height: 100rpx;" v-if="index==0"></image>
									<image src="../../../static/icon/recovery_assess/second.png"
										style="width: 100rpx;height: 100rpx;" v-if="index==1"></image>
									<image src="../../../static/icon/recovery_assess/third.png"
										style="width: 100rpx;height: 100rpx;" v-if="index==2"></image>
									<view v-if="index!=0&&index!=1&&index!=2" class="rankBox">{{index+1}}</view>
								</view>
								<view class="name">{{item.name}}</view>
							</view>
							<view class="score">{{item.score}}</view>
						</view>
					</scroll-view>
				</view>
		
			</view>
			<view>
				<u-modal v-model="show" :content="content" :title="title" @confirm="jump_blue"></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import bigBtn from '@/components/bigButton.vue';
	import loadP from "@/components/loadPoint.vue";
	export default {
		components: {
			bigBtn,
			loadP
		},
		onTabItemTap (item) { 
		    console.log(item) 
			uni.showToast({
				icon: 'none',
				title: "功能正在开发，敬请期待",
			})
		},
		onLoad () {
			uni.showToast({
				icon: 'none',
				title: "功能正在开发，敬请期待",
			})
		},	
		data() {
			return {
				dataList: [{
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					}, {
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					},
					{
						name: "谢广坤",
						score: 556
					}
				],
				rank: 100,
				btnShow: true,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},

				btnBoxWidthX: 400,
				btnBoxHeightX: 400,
				btnColorX: "#4BCAC0",
				btnImgSrcX: "../../../static/icon/recovery_assess/assess.png",
				btnTextX: "开始评估",
				btnTextColorX: "#ffffff",
				btnTextSizeX: 25,
				btnImgWidthX: 180,
				btnRadiusX: 200,

				btnBoxWidthB: 400,
				btnBoxHeightB: 400,
				btnColorB: "#A5A5A5",
				btnImgSrcB: "../../../static/icon/training/blueTooth.png",
				btnTextB: "蓝牙未连接",
				btnTextColorB: "#ffffff",
				btnTextSizeB: 25,
				btnImgWidthB: 180,
				btnRadiusB: 200,

				btnBoxWidth: 300,
				btnBoxHeight: 300,
				btnColor: "#007AFF",
				btnImgSrc: "../../../static/icon/recovery_assess/info.png",
				btnText: "基本信息录入",
				btnTextColor: "#ffffff",
				btnTextSize: 20,
				btnImgWidth: 140,
				btnRadius: 150,


				list: [{
						name: '评估'
					},
					{
						name: '评估排名'
					}
				],
				curNow: 0,

				show: false,
				content: '请打开手机蓝牙，连接康复设备',
				title: "蓝牙未连接",

				connect: false,
				showTip:false,
				writeInfo: true,

			}
		},
		onLoad() {
			this.connect = uni.getStorageSync("connectBlue");
			this.getRank();
		},
		onShow() {
			this.connect = uni.getStorageSync("connectBlue");
		},
		methods: {
			getRank() {
				var me = this;
				var usertoken = uni.getStorageSync("usertoken");
				var info = uni.getStorageSync("accountInfo");
				uni.request({
					url: me.serverUrl + "/recovery/getRecoveryRank",
					data: {
						"openid": info.openid
					},
					method: "POST",
					header: {
						"usertoken": usertoken
					},
					success(res) {
						console.log(res.data)
						if (res.data.status == 200) {
							me.dataList = res.data.rankList;
							me.rank = res.data.rank;
						}
					}
				})
			},
			open() {
				this.show = true;
				// this.connect = true;

			},
			jump() {
				// uni.navigateTo({
				// 	url: '../../my_module/health/info-date/info-date'
				// })
				uni.navigateTo({
					url: '../../my_module/health/ill-details/ill-details'
				})
			},
			jump_blue() {
				uni.navigateTo({
					url: '../../blue-tooth/blue-tooth'
				})
			},
			sectionChange(index) {
				this.curNow = index;
				this.btnShow = !this.btnShow;
			},
			genID(length){
			   return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
			},
			jump_assess() {
				// uni.navigateTo({
				// 	url:"../../recovery-assess/trainScore-recovery/trainScore-recovery"
				// })
				let me=this;
				this.showTip=true;
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src =
					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
					let sequenceId=me.genID(20);
					uni.setStorageSync("sequenceId",sequenceId);
					uni.setStorageSync("sendBlue",true);
				});
				innerAudioContext.onEnded((res) => {
					this.showTip=false;
					uni.setStorageSync("sendBlue",false);
					uni.navigateTo({
						url:"../../recovery-assess/trainScore-recovery/trainScore-recovery"
					})
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				// uni.navigateTo({
				// 	url:'../../training/isTraining/isTraining'
				// })
			},
			jump_write() {
				this.writeInfo = false;
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style>
	@import url("recovery-assess");
	.recovery-wrap {
		width: 750rpx;
		height: 100%;
	}
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
